<template>
	
	
<div style="height: 100%;overflow: scroll;">
	<van-index-bar :index-list="indexList">
	
	
	<template v-for="(item,index) in countriesObj">
	 
		<van-index-anchor :index="index" />
		<van-cell @click="choose(item2.name)" v-for="item2 in item" :title="item2.name" />
	
		
	</template>
		
	
		
		</van-index-bar>
</div>

</template>

<script setup>
	
	import router from '@/router/index.js';
import {countries} from './countries.js'
	
	
	console.log(countries)
	
	let countriesObj = {}
	countries.forEach(function(v){
		
		if(v.index  in  countriesObj){
			countriesObj[v.index].push(v)
		}else{
			countriesObj[v.index] = [v]
		}
	})
	
 let indexList  = Object.keys(countriesObj)
 
 console.log(indexList)
 
 function choose(name){
	 
	 console.log(name)
	 
	 sessionStorage.setItem('country',name)
	 router.back()
 }
	
</script>

<style>
</style>